<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			<script src="js/jquery-3.4.1.min.js"></script>
	<script>
        var USER=JSON.parse(window.sessionStorage.getItem("User_Login"));
	</script>
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="index.html">首页</a> <a href="">管理员</a>
			<a> <cite>管理员列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="开始日"
									name="start" id="start">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="截止日"
									name="end" id="end">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="name" placeholder="请输入用户名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-body ">
						<table class="layui-table" width="100%"
							lay-data="{url:'userSearch',page:true,toolbar: '#toolbarDemo',id:'queryTable'}"
							lay-filter="queryTable">
							<thead>
								<tr>
									<th lay-data="{type:'checkbox'}">ID</th>
									<th lay-data="{field:'id', width:80, sort: true}">ID</th>
									<th lay-data="{field:'userName', width:120, sort: true, edit: 'text'}">用户名</th>
									<th lay-data="{field:'name',width:80, edit: 'text'}">真实姓名</th>
									<th lay-data="{field:'telephone',width:120, edit: 'text'}">电话</th>
									<th lay-data="{field:'landMark',width:120, sort: true, edit: 'text'}">坐标</th>
									<th lay-data="{field:'unit',width:120, sort: true, edit: 'text'}">所属单位</th>
									<th lay-data="{field:'roleName',width:120, sort: true, edit: 'text'}">角色</th>
									<th lay-data="{field:'enterdate',width:120, sort: true, edit: 'text'}">入职时间</th>
									<th lay-data="{field:'idcard',templet:function(data){if(data.idcard!=undefined){return '<img src='+data.idcard+' />';}return '';} }">身份证照片</th>
									<th lay-data="{templet: '#newsListBar',minWidth:300}">操作</th>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
	<script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" > 
			<button class = "layui-btn layui-btn-sm" lay-event = "addNewUser" ><i class="layui-icon">&#xe654;</i>添加用户</button>
			<button class = "layui-btn layui-btn-sm" lay-event = "delBatch" > 批量删除 </button>
			<button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >
            <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
        </div > 
    </script>
    <!--操作-->
	<script type="text/html" id="newsListBar">
		<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" id="del" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-xs layui-btn-primary" id="look" lay-event="look">详情</a>
		<a class="layui-btn layui-btn-xs" id="updatepassword" lay-event="updatepassword" >一键改密</a>
	</script>

<script>
	layui.use('laydate', function() {
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
            ,trigger: 'click'
		});
		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
            ,trigger: 'click'
		});
	});
</script>
<script>
	layui.use(['table','form','layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        //查询
        form.on("submit(sreach)", function (data) {
            table.reload("queryTable", {
                page: {
                    curr: 1
                    //重新从第 1 页开始
                },
                where: {
                    //name,startDate,endDate传递给后台的值名称。
                    name: $("input[name=name]").val(), //搜索的关键字
                    startDate: $("input[name=start]").val(),
                    endDate: $("input[name=end]").val()
                }
            });
            return false;
        });
        //监听单元行
        table.on('tool(queryTable)', function (obj) {
            var layEvent = obj.event;
            var data = obj.data;
            if (layEvent == "edit") {
                edit(data);
            } else if (layEvent == "updatepassword") {
                updatepassword(data);
            } else if (layEvent == "look") {
                look(data);
            } else if (layEvent == "del") {
                del(data);
            }
            event.stopPropagation();
        });
        //再添加一个点击监听事件，防止因为按钮过多， 省略号隐藏的按钮没有事件
        table.on('row(queryTable)', function (obj) {
            var data = obj.data;

            $(document).on("click", "#edit", function (event) {
                edit(data);
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });

            $(document).on("click", "#updatepassword", function (event) {
                updatepassword(data);
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });
            $(document).on("click", "#look", function () {
                look(data);
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });
            $(document).on("click", "#del", function () {
                var d = [data];//封装成数组
                deleteAll(d);//
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });
            $(document).on("click", "#updatepassword", function (event) {
                updatepassword(data)
                event.stopPropagation();
                return false;
            });
            return false;
        });

        function edit(data) {
            var id = data.id;
            alert(id);
            if (USER.role == 1 || USER.id == id||USER.role>id) {
                xadmin.open('修改用户', './user-edit.html?' + id, 600, 400);
            }else {
                alert("您无此权限!");
            }
        }

        function updatepassword(data) {
            var id = data.id;
            if (USER.id == data.id) {
            xadmin.open('更改密码', './user-passwordedit.html?' + id, 600, 400);
			}else {
                alert("您无此权限!");
			}
        }

		
		//监听单元格编辑，useless
		table.on('edit(queryTable)', function(obj) {
			var value = obj.value //得到修改后的值
			, data = obj.data //得到所在行所有键值
			, field = obj.field; //得到字段
			layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
		});

		function deleteAll(data){
		    if (USER.role == 1) {
            if (data.length == 0) {
                return;
            }
		    var ids=[];
            for (var i in data) {
                ids.push(data[i].id);
            }
            alert(ids);
            layer.confirm('确定删除选中的用户？', {
                icon : 3,
                title : '提示信息'
            }, function(index) {
                $.getJSON("batchDelUser", {ids:ids}, function(d) {
                    if (d>0) {
                        layer.alert("删除成功");
                        location.reload();
                    } else {
                        layer.alert("删除失败");
                    }
                },"text");
            })
			//
		}else {
		        alert("您无此权限!");
			}}
		//头工具栏事件
		table.on('toolbar(queryTable)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'addNewUser':
				xadmin.open('添加用户','./user-add.html',600,400);
			break;
                //批量删除
                case 'delBatch':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    deleteAll(data);
                    break;
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
			;
		});
	});
</script>

</html>